<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in cartList" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td><input type="text" v-model.number="item.count"></td>
                    <td>{{item.price * item.count}}</td>
                </tr>
                <tr>
                    <td colspan="2">总计</td>
                    <td>{{totalNum}}</td>
                    <td>{{totalPrice()}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                cartList: [{
	"id": 97197,
	"sn": "111238",
	"unicode": "100010328",
	"name": "【DCH-30170200058】东成_合金钻头6*160圆柄(60202024)/[1支]",
	"count": 1,
	"price": 2,
	"makerModel": "30170200058",
	"image": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/10/881fcdc5-9cc4-4191-9700-096dcff30389-300.jpg",
	"unit": "支",
	"weight": 1.0,
	"stock": 999999,
	"isList": 0,
	"brandId": 1218,
	"brandName": "东成",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 98912,
	"sn": "112343",
	"unicode": "100000721",
	"name": "博世（BOSCH）S3 四坑两刃钻头 12*400*460mm-(2608680280)/支",
	"count": 1,
	"price": 26,
	"makerModel": "ZX_2608680280",
	"image": "//resource.toolmall.com/merchantbussness/online/2022/3/1646898832231-66a1esource.jpg?x-oss-process=image/resize,m_fixed,h_300,w_300",
	"unit": "支",
	"weight": 0.5,
	"stock": 999999,
	"isList": 1,
	"brandId": 19,
	"brandName": "BOSCH/博世",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 100811,
	"sn": "105029",
	"unicode": "100010308",
	"name": "【DCH-30170200038】东成_合金钻头12*150圆柄(60202004)/[1支]",
	"count": 1,
	"price": 4,
	"makerModel": "30170200038",
	"image": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/10/83182a32-8636-4d83-b4d4-fde2b00c4795-300.jpg",
	"unit": "支",
	"weight": 1.0,
	"stock": 999999,
	"isList": 0,
	"brandId": 1218,
	"brandName": "东成",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 97243,
	"sn": "112282",
	"unicode": "100010307",
	"name": "【DCH-30170200037】东成_合金钻头10*150圆柄(60202003)/[1支]",
	"count": 1,
	"price": 4,
	"makerModel": "30170200037",
	"image": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2017/10/7b62a545-79d6-49f7-bc40-c14419d554ed-300.jpg",
	"unit": "支",
	"weight": 1.0,
	"stock": 999999,
	"isList": 0,
	"brandId": 1218,
	"brandName": "东成",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 136604,
	"sn": "10551688",
	"unicode": "100032849",
	"name": "【WKB-W124110N】万克宝_圆柄电锤钻头6×160/[1支]",
	"count": 1,
	"price": 5,
	"makerModel": "W124110N",
	"image": "//resource.toolmall.com/merchantbussness/1564025149434-b3e12f7c-3ebe-4a45-8cb7-922dcffdb941-medium.jpg",
	"unit": "支",
	"weight": 0.5,
	"stock": 999999,
	"isList": 1,
	"brandId": 119,
	"brandName": "WORKPRO/万克宝",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 104015,
	"sn": "124363",
	"unicode": "100020135",
	"name": "博世（BOSCH）四坑5系钻头 14x100x160mm-(2608833816)/1支",
	"count": 1,
	"price": 24,
	"makerModel": "2608833816",
	"image": "//resource.toolmall.com/merchantbussness/online/2022/3/1646715858252-f2700source.jpg?x-oss-process=image/resize,m_fixed,h_300,w_300",
	"unit": "支",
	"weight": 0.5,
	"stock": 999999,
	"isList": 0,
	"brandId": 19,
	"brandName": "BOSCH/博世",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 107134,
	"sn": "103402",
	"unicode": "100021362",
	"name": "【BS-2608833771】博世_四坑5系钻头 5x50x110/支",
	"count": 1,
	"price": 9,
	"makerModel": "2608833771",
	"image": "//resource.toolmall.com/merchantbussness/1561717352538-1f434a7a-e64d-4e88-b1a3-6a63530eb1a9-medium.jpg",
	"unit": "支",
	"weight": 1.0,
	"stock": 999999,
	"isList": 0,
	"brandId": 19,
	"brandName": "BOSCH/博世",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 108183,
	"sn": "105652",
	"unicode": "100020134",
	"name": "博世（BOSCH）四坑5系钻头 12x100x160mm-(2608833807)/1支",
	"count": 1,
	"price": 15,
	"makerModel": "2608833807",
	"image": "//resource.toolmall.com/merchantbussness/online/2022/3/1646715854789-4b102source.jpg?x-oss-process=image/resize,m_fixed,h_300,w_300",
	"unit": "支",
	"weight": 1.0,
	"stock": 999999,
	"isList": 0,
	"brandId": 19,
	"brandName": "BOSCH/博世",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}, {
	"id": 99502,
	"sn": "119600",
	"unicode": "100000719",
	"name": "博世（BOSCH）S3 四坑两刃钻头12*150*210mm-(2608680278)/支",
	"count": 1,
	"price": 9,
	"makerModel": "2608680278",
	"image": "//image.toolmall.com/image/toolmallPc/proudct/prouctView/2016/12/39801b28-4d11-41ca-bebd-cd7a993d35b5-medium.jpg",
	"unit": "支",
	"weight": 1.0,
	"stock": 999999,
	"isList": 0,
	"brandId": 19,
	"brandName": "BOSCH/博世",
	"categoryId": 261,
	"categoryName": "电锤钻头"
}]
            },
            computed: {
                totalNum() {
                    let num = 0;
                    this.cartList.forEach(item => {
                        num += item.count * 1
                    });
                    return num
                }
            },
            methods: {
                totalPrice() {
                    let num = 0;
                    this.cartList.forEach(item => {
                        num += item.count * item.price
                    });
                    return num
                }
            }
        })
    </script>
</body>
</html>